<template>
  <div class="statisticalanalysis">
    <el-button @click="print" class="signs print" v-if="list.shStatus == 2"
      >打印</el-button
    >
    <el-tooltip
      class="item"
      effect="dark"
      content="审核通过才可以打印"
      v-else
      placement="top-start"
    >
      <el-button class="signs print" style="cursor: not-allowed"
        >打印</el-button
      >
    </el-tooltip>
    <div ref="print">
      <el-card class="box-card">
        <div style="width: 85%; text-align: center">
          <span
            style="
              height: 45px;
              display: inline-block;
              line-height: 45px;
              font-weight: 700;
            "
            >盲板抽堵安全作业证</span
          >
        </div>
        <table border="1" cellspacing="0">
          <tr align="center" height="35px">
            <td width="120px">申请单位</td>
            <td colspan="3">{{ list.sqdwmc }}</td>
            <td colspan="3">申请人</td>
            <td colspan="2">{{ list.sqrmc }}</td>
            <td colspan="2">作业证编号</td>
            <td colspan="2" width="100px">{{ list.zyzbh }}</td>
          </tr>
          <tr align="center" height="35px">
            <td rowspan="2">设备管理名称</td>
            <td rowspan="2">介质</td>
            <td rowspan="2">温度</td>
            <td rowspan="2">压力</td>
            <td colspan="3">盲板</td>
            <td colspan="2">实时时间</td>
            <td colspan="2">作业人</td>
            <td colspan="2">监护人</td>
          </tr>
          <tr align="center" height="35px">
            <td>材质</td>
            <td>规模</td>
            <td>编号</td>
            <td>堵</td>
            <td>抽</td>
            <td>堵</td>
            <td>抽</td>
            <td>堵</td>
            <td>抽</td>
          </tr>
          <tr align="center" height="35px">
            <td>{{ list.gdmc }}</td>
            <td>{{ list.jz }}</td>
            <td>{{ list.wd }}</td>
            <td>{{ list.yl }}</td>
            <td>{{ list.cz }}</td>
            <td>{{ list.gg }}</td>
            <td>{{ list.mbbh }}</td>
            <td>{{ list.mbdsssj }}</td>
            <td>{{ list.mbccsssj }}</td>
            <td>{{ list.mbdzyrmc }}</td>
            <td>{{ list.mbczyrmc }}</td>
            <td>{{ list.mbdjhrmc }}</td>
            <td>{{ list.mbcjhrmc }}</td>
          </tr>
          <tr align="center" height="35x">
            <td colspan="3">作业单位作业指挥</td>
            <td colspan="10">{{ list.zydwmc }}</td>
          </tr>
          <tr align="center" height="35x">
            <td colspan="3">作业单位负责人</td>
            <td colspan="10">{{ list.pzydwfzrmc }}</td>
          </tr>
          <tr align="center" height="35x">
            <td colspan="3">涉及的其他行业作业</td>
            <td colspan="10">{{ list.tszy }}</td>
          </tr>
          <tr height="60px">
            <td colspan="13" style="border-bottom: none; padding-left: 10px">
              <span class="option">盲板位置图及编号：</span>
              <img :src="mbts.url" class="imageSize" /><img />
            </td>
          </tr>
          <tr height="60px">
            <td
              align="right"
              colspan="13"
              style="border-top: none; padding-right: 2rem"
            >
              编制人：{{ list.pmbtbzrmc }}
              <span class="paddingLeft">{{ list.mbtbzrq }}</span>
            </td>
          </tr>
          <tr align="center" height="35px">
            <td>序号</td>
            <td colspan="10">安全措施</td>
            <td colspan="2">确认人</td>
          </tr>
          <tr align="center" height="40px">
            <td>1</td>
            <td class="textleft" colspan="10">
              在有毒介质的管道、设备上作业时，尽可能降低系统压力，作业点应为常压
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td>2</td>
            <td class="textleft" colspan="10">
              在有毒介质的管道、设备上作业时，作业人员穿戴适合的防护用具
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td>3</td>
            <td class="textleft" colspan="10">
              易燃易爆场所，作业人员穿防静电工作服、工作鞋；作业时使用防爆灯具和防爆工具
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td>4</td>
            <td class="textleft" colspan="10">
              易燃易爆场所，距作业地点30 m内无动火作业
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td>5</td>
            <td class="textleft" colspan="10">
              在强腐蚀性介质的管道、设备上作业时，作业人员已采取防止酸碱灼伤的措施
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td>6</td>
            <td class="textleft" colspan="10">
              在介质温度较高、可能造成烫伤的情况下，作业人员已采取防烫措施
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td>7</td>
            <td class="textleft" colspan="10">
              同一管道上不同时进行两处及两处以上的盲板抽堵作业。
            </td>
            <td colspan="2">{{ list.paqcsqrrmc }}</td>
          </tr>
          <tr align="center" height="80px">
            <td>8</td>
            <td colspan="10">
              <div class="tdPostion">
                <p class="Safetymeasures">其他安全措施：{{ list.qtcs }}</p>
              </div>
              <div class="trPositon">
                <p class="makePeopleTwo">编制人：{{ list.pqtcsbzrmc }}</p>
              </div>
            </td>
            <td colspan="2">{{ list.pqtcsqrrmc }}</td>
          </tr>
          <tr align="center" height="40px">
            <td colspan="4">实施安全教育</td>
            <td colspan="3">{{ list.aqjyrmc }}</td>
            <td colspan="3"></td>
            <td colspan="3"></td>
          </tr>
          <tr height="60px">
            <td colspan="13" style="border-bottom: none; padding-left: 10px">
              生产车间(分厂意见)：{{ list.sccjyj }}
            </td>
          </tr>
          <tr height="60px">
            <td
              align="right"
              colspan="13"
              style="border-top: none; padding-right: 2rem"
            >
              签字：{{ list.sccjqzmc }}
              <span class="paddingLeft">{{ list.sccjrq }}</span>
            </td>
          </tr>
          <tr height="60px">
            <td colspan="13" style="border-bottom: none; padding-left: 10px">
              作业单位意见：{{ list.zydwyj }}
            </td>
          </tr>
          <tr height="60px">
            <td
              align="right"
              colspan="13"
              style="border-top: none; padding-right: 2rem"
            >
              签字：{{ list.zydwqzmc }}
              <span class="paddingLeft">{{ list.zydwrq }}</span>
            </td>
          </tr>
          <tr height="60px">
            <td colspan="13" style="border-bottom: none; padding-left: 10px">
              审批单位意见：{{ list.spdwyj }}
            </td>
          </tr>
          <tr height="60px">
            <td
              align="right"
              colspan="13"
              style="border-top: none; padding-right: 2rem"
            >
              签字：{{ list.spdwqzmc }}
              <span class="paddingLeft">{{ list.sprq }}</span>
            </td>
          </tr>
          <tr height="60px">
            <td colspan="13" style="border-bottom: none; padding-left: 10px">
              盲板抽堵作业单位确认情况：{{ list.mbcdzydwqk }}
            </td>
          </tr>
          <tr height="60px">
            <td
              align="right"
              colspan="13"
              style="border-top: none; padding-right: 2rem"
            >
              签字：{{ list.mbcdzydwqzmc }}
              <span class="paddingLeft">{{ list.mbcdzydwrq }}</span>
            </td>
          </tr>
          <tr height="60px">
            <td colspan="13" style="border-bottom: none; padding-left: 10px">
              生产车间（分厂）确认情况：{{ list.sccjqrqk }}
            </td>
          </tr>
          <tr height="60px">
            <td
              align="right"
              colspan="13"
              style="border-top: none; padding-right: 2rem"
            >
              签字：{{ list.sccjqrqzmc }}
              <span class="paddingLeft">{{ list.sccjqrrq }}</span>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
import printStyle from "./printStyle";
import defineAPIURl from "@/utils/define";

export default {
  name: "mangban",
  props: {
    list: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      mbts: {
        url: "",
      },
    };
  },
  created() {
    this.list.mbccsssj = this.formatDate(this.list.mbccsssj); //
    this.list.mbdsssj = this.formatDate(this.list.mbdsssj);
    this.list.mbtbzrq = this.formatDate(this.list.mbtbzrq); //
    this.list.sccjqrrq = this.formatDateH(this.list.sccjqrrq);
    this.list.sccjrq = this.formatDateH(this.list.sccjrq); //
    this.list.sprq = this.formatDateH(this.list.sprq); //
    this.list.sqrq = this.formatDateH(this.list.sqrq); //
    this.list.zydwrq = this.formatDateH(this.list.zydwrq); //
    this.list.mbcdzydwrq = this.formatDateH(this.list.mbcdzydwrq); //
    this.url();
  },
  methods: {
    url() {
      if (this.list.mbt !== "[]") {
        const mbt = this.list.mbt ? JSON.parse(this.list.mbt) : this.mbts.url;
        if (!mbt[0].url) {
          this.mbts.url = "";
        } else {
          const route = mbt[0].url;
          this.mbts.url = defineAPIURl.APIURl + route;
        }
      }
    },
    formatDate(needTime) {
      //needTime是整数，否则要parseInt转换
      if (needTime !== null && needTime !== undefined) {
        var time = new Date(needTime);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        return y + "年" + this.add0(m) + "月" + this.add0(d) + "日";
      } else {
        return "  年  月  日";
      }
    },
    formatDateH(needTime){
      //needTime是整数，否则要parseInt转换
        if(needTime !== null && needTime !== undefined){
          var time = new Date(needTime);
          var y = time.getFullYear();
          var m = time.getMonth()+1;
          var d = time.getDate();
          var h = time.getHours();
          var mm = time.getMinutes();
          // var s = time.getSeconds();
          return y+'年'+this.add0(m)+'月'+this.add0(d)+'日'+this.add0(h)+'时'+this.add0(mm)+'分';
        }else{
          return '  年  月  日  时  分';
        }
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    // 打印
    print() {
      let print = this.$refs.print.innerHTML;
      let printPart = print + printStyle;
      let newTab = window.open("_blank");
      newTab.document.body.innerHTML = printPart;
      newTab.print();
      newTab.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.statisticalanalysis {
  .signs {
    position: absolute;
    right: 10px;
    top: 70px;
    &.print {
      top: 20px;
      right: 50px;
    }
  }
  .option {
    float: left;
    margin-top: 10px;
    padding-left: 40px;
  }
  .box-card {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    color: #606266;
    position: relative;
    table {
      margin: 0 auto;
      tr {
        .textleft {
          text-align: left;
          padding-left: 20px;
        }
      }
      .imageSize {
        height: 80px;
        width: auto;
        display: inline-block;
      }
      .paddingLeft {
        padding-left: 1rem;
      }
      span {
        display: inline-block;
        min-width: 20px;
      }
      // 其他安全措施
      tr:nth-child(18) {
        .trPositon {
          position: relative;
          height: 80px;
          width: 100%;
          .makePeopleTwo {
            position: absolute;
            right: 15%;
            top: 55%;
          }
        }
        .tdPostion {
          width: 100%;
          height: 30px;
          position: relative;
          .Safetymeasures {
            position: absolute;
            left: 2%;
            top: 20%;
          }
        }
      }
    }
  }
}
</style>